<template>
    <div class="root">
        <Icon :type="icon" :size="size" />
        <span>
            <slot />
        </span>
    </div>
</template>

<script>
export default {
    name:'myIcon',
    props: {
        icon:{
            type:String,
            required:true
        },
        size:{
            type:[String,Number]
        }
    }
};
</script>


<style lang="scss" scoped>
    .root {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        i{
            color: #17233d;
        }

        span{
            margin-left: 4px;
            color: #808695;
        }
    }
</style>